<template>
  <div class="nav">
    <div @mouseenter="on_mouseenter" @mouseleave="on_mouseleave">
      <swiper ref="navSwiper" :options="navSwiperOption">
        <swiper-slide v-for="(item, index) in banners" :key="index">
          <img class="swiper_slide_img" :src="item.url" alt="slide">
        </swiper-slide>
        <div slot="pagination" class="swiper-pagination nav-swiper-pagination" />
        <div slot="button-prev" class="swiper-button-prev nav-swiper-button-prev" />
        <div slot="button-next" class="swiper-button-next nav-swiper-button-next" />
      </swiper>
    </div>
  </div>
</template>

<script>
// 引入插件
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

export default {
  name: 'NavSwiper',
  components: {
    swiper,
    swiperSlide
  },
  props: {
    banners: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      navSwiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 显示分页
        pagination: {
          el: '.swiper-pagination.nav-swiper-pagination',
          clickable: true // 允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          prevEl: '.swiper-button-prev.nav-swiper-button-prev',
          nextEl: '.swiper-button-next.nav-swiper-button-next'
        }
      }
    }
  },
  computed: {
    navSwiper () {
      return this.$refs.navSwiper.swiper
    }
  },
  mounted () {
    // current swiper instance
    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    // eslint-disable-next-line no-console
    // console.log('this is current swiper instance object', this.swiper)
    // this.swiper.slideTo(3, 1000, false);
  },
  methods: {
    // 通过获得的swiper对象来暂停自动播放
    on_mouseenter () {
      this.navSwiper.autoplay.stop()
    },
    on_mouseleave () {
      this.navSwiper.autoplay.start()
    }
  }
}
</script>
<style lang="scss" scoped>
.nav {
  width: 960px;
  max-height: 367px;
  position: absolute;
  left: 240px;
  top: 0;

  .swiper-container {
    position: relative;
    width: 100%;
    max-height: 367px;
    overflow: hidden;
    background: #fff;

    .swiper-slide {
      background: #fff;
      /* width: 100%;
      line-height: 200px;
      background: yellowgreen;
      color: #000;
      font-size: 16px;
      text-align: center; */
    }
  }
}
//.nav-swiper-pagination{
//  top: 340px;
//  position: absolute;
//  z-index: 2000;
//}

.swiper_slide_img {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  height: auto;
  overflow: hidden;
}

</style>
